#caret-position-div {
  position: absolute;
  border-top: solid 1px rgba(0,0,0,.75);
  white-space: nowrap;
  width: 20px;
  height: 1px;
}
#caret-position-div {
  animation: animated-cursor 600ms steps(30, end) infinite;
}
#caret-position-div > p {
  display: inline;
}
@keyframes animated-cursor{
  from{ border-top-color: rgba(0,0,0,.75); }
  to{ border-top-color: transparent; }
}

.dot {
  height: 14px;
  width: 14px;
  background-color: dodgerblue;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  right: -7px;
  top: -7px;
}

#selection-start-div {
  position: absolute;
  border-top: solid 1px rgba(0,0,0,.75);
  white-space: nowrap;
  width: 20px;
  height: 1px;
}
#selection-start-div > p {
  display: inline;
}
#selection-start-div > .dot {
  right: -14px;
  top: -7px;
}

#selection-end-div {
  position: absolute;
  border-top: solid 1px rgba(0,0,0,.75);
  white-space: nowrap;
  width: 20px;
  height: 1px;
}
#selection-end-div > p {
  display: inline;
}
#selection-end-div > .dot {
  right: -14px;
  top: -7px;
}
